<script setup>
import { nextTick, reactive, ref, watch, watchEffect } from 'vue'
import RandomLayout from './RandomLayout.vue'
// import { ElButton, ElInput, ElInputNumber, ElSwitch } from 'element-plus';

const elementMaxWidth = ref(100)
const boxWidth = ref(800)
const boxHeight = ref(800)
const cellWidth = ref(10)
const cellHeight = ref(10)
const deepth = ref(10)
const showGrid = ref(false)
const duration = ref(0)
const randomLayout = ref()

const words = [
  { 'text': 'grade', 'chinese': '分等级,评分' },
  { 'text': 'come to / draw / reach a conclusion', 'chinese': '得出结论' },
  { 'text': 'fit', 'chinese': '合适,合身,符合,一致,合格,胜任,容纳,装进,安装' },
  { 'text': 'involve', 'chinese': '包含,需要,涉及,影响,使参加' },
  { 'text': 'get into', 'chinese': '进入,陷入,被录取,染上' },
  { 'text': 'Oliver', 'chinese': '奥利弗' },
  { 'text': 'express', 'chinese': '特快的,快递的' },
  { 'text': 'on offer', 'chinese': '削价出售的,特价出售的' },
  { 'text': 'oxide', 'chinese': '氧化物' },
  { 'text': 'agricultural', 'chinese': '农业的,耕种的,农学的' },
  { 'text': 'hoof', 'chinese': '蹄' },
  { 'text': 'defender', 'chinese': '防守队员；后卫,守卫者；保护人；防御者' },
  { 'text': 'in the meantime', 'chinese': '在此期间,与此同时' },
  { 'text': 'brunch', 'chinese': '早午餐' },
  { 'text': 'fare', 'chinese': '费,票价' },
  { 'text': 'magic', 'chinese': '魔法的,魔术的,有魔力的,不可思议的' },
  { 'text': 'lie around / about', 'chinese': '到处乱扔乱放,无所事事地混日子' },
  { 'text': 'double', 'chinese': '两倍,两倍数,两倍量,两倍物,双打,双人房间' },
  { 'text': 'terrible', 'chinese': '可怕的,令人不快的,厉害的,猛烈的,非常严重的, 坏透的,很糟的,令人不快的,厉害的,猛烈的,非常严重的, 坏透的,很糟的' },
  { 'text': 'look alike', 'chinese': '看起来像' },
  { 'text': 'shadow', 'chinese': '阴影' },
  { 'text': 'knock down', 'chinese': '拆,拆卸,击倒,撞倒' },
  { 'text': 'illegal hunting', 'chinese': '非法狩猎' },
  { 'text': 'cosy / cozy', 'chinese': '暖和舒适的,感觉舒服的' },
  { 'text': 'south', 'chinese': '南,南方' },
  { 'text': 'roller coaster', 'chinese': '过山车' },
  { 'text': 'portion', 'chinese': '一份，一部分' },
  {'text': 'mark', 'chinese': '留痕迹于,作记号于,标志,表示…的特征,打分数,庆祝,纪念'},
  {'text': 'starvation', 'chinese': '饥饿,饿死'},
  {'text': 'welcome', 'chinese': '受欢迎的,令人愉快的,被允许的,可随意的'},
  {'text': 'burglary', 'chinese': '盗窃,窃案,盗窃罪'},
  {'text': 'freely', 'chinese': '自由地,无节制地,通畅地,无阻碍地,直率地,坦白地,慷慨地'},
  {'text': 'gear', 'chinese': '使适合于'},
  {'text': 'stockings', 'chinese': '长袜'},
  {'text': 'unlike', 'chinese': '不像,不同于'},
  {'text': 'practically', 'chinese': '几乎,差不多,实际上,事实上'},
  {'text': 'armchair', 'chinese': '扶手椅,单人沙发'},
  {'text': 'superior to', 'chinese': '比……更好；更胜一筹'},
  {'text': 'organised', 'chinese': '有组织的,有安排的,有序的,有条理的'},
  {'text': 'organise', 'chinese': '组织,安排,有序,有条理'},
]

const content = ref(JSON.stringify(words))
const params = reactive([
  {val: boxWidth.value, label: '容器宽度'},
  {val: boxHeight.value, label: '容器高度'},
  {val: cellWidth.value, label: 'cell宽度'},
  {val: cellHeight.value, label: 'cell高度'},
  {val: elementMaxWidth.value, label: '元素最大宽度'},
  {val: deepth.value, label: '最大重试次数'},
])

const doRandom = (cnt) => {
  const rst = words.sort((one, two) => {
    return Math.random() * 10 - Math.random() * 10
  }).slice(0, cnt)

  content.value = JSON.stringify(rst)

  refresh()
}

const refresh = () => {
  deepth.value = params[5].val
  elementMaxWidth.value = params[4].val
  cellHeight.value = params[3].val
  cellWidth.value = params[2].val
  boxHeight.value = params[1].val
  boxWidth.value = params[0].val
  
  console.log('重新设置参数:', boxWidth.value, boxHeight.value, cellWidth.value, cellHeight.value, elementMaxWidth.value, showGrid.value)
  nextTick(() => {
    randomLayout.value.layout()
  })
}

const layoutDone = (ms) => {
  duration.value = ms
}
</script>

<template>
  <div class="grid">
    <div class="op-box">
      <div class="form-box" v-for="item in params" :key="item.label">
        <span>{{ item.label }}</span>
        <ElInputNumber v-model="item.val"></ElInputNumber>
      </div>
      <div class="form-box">
        <ElSwitch v-model="showGrid" active-text="显示栅格"></ElSwitch>
      </div>
      <div class="form-box">
        <span>单词</span>
        <div class="random-box">
          <ElButton size="small" @click="doRandom(10)">随机10词</ElButton>
          <ElButton size="small" @click="doRandom(20)">随机20词</ElButton>
          <ElButton size="small" @click="doRandom(30)">随机30词</ElButton>
          <ElButton size="small" @click="doRandom(40)">随机40词</ElButton>
        </div>
        <ElInput class="content-input" v-model="content" type="textarea" :rows="5" style="box-sizing: border-box;"></ElInput>
      </div>
      <div class="form-box">
        <ElButton @click="refresh()">刷新布局</ElButton>
      </div>
      <div class="form-box">
        <span>耗时{{ duration }}(ms)</span>
      </div>
    </div>
    <RandomLayout :boxWidth="boxWidth" 
                  :boxHeight="boxHeight" 
                  :cellWidth="cellWidth" 
                  :cellHeight="cellHeight" 
                  :elementMaxWidth="elementMaxWidth"
                  :deepth="deepth"
                  :grid="showGrid"
                  :data="JSON.parse(content).map(m => [m.text, m.chinese]).flat()"
                  ref="randomLayout"
                  @onLayout="layoutDone"/>
    
  </div>
</template>

<style scoped>
.grid {
  display: flex;
  flex-direction: row;
}

.random-box {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding-bottom: 10px;
}
.op-box {
  width: 400px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 10px;
  margin-right: 20px;
}
.content-input {
  box-sizing: border-box;
}

.form-box {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  /* border: 1px solid red; */
}

.form-box>span {
  text-align: left;
  margin-bottom: 10px;
  font-size: 14px;
  color: #4e4e4e;
}

</style>
